<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NFlex, NButton,
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import { getToken } from '@/utils'
import { useCRUD } from '@/composables'
import api from '@/api'
import {useRoute} from "vue-router"
import {TRUE} from "sass";
import {router} from "@/router";
const route = useRoute()
import {useTagsStore} from "@/store";
import TheIcon from "@/components/icon/TheIcon.vue";
const tagsStore = useTagsStore()

defineOptions({ name: '订单详情' })

const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE

const {
  modalVisible,
  modalTitle,
  modalLoading,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
  handleSave,
} = useCRUD({
  name: '订单详情',
  initForm: {},
  doCreate: api.getOrdersList,
  doUpdate: api.updateOrdersList,
  doDelete: api.deleteOrdersList,
  refresh: () => $table.value?.handlerefresh(),
})

const data = reactive({
  songsData: [],
  token: getToken(),
  row:[],
  goodsType: [],
  goods_columns:[
        {
          width:"60",
          title: 'ID',
          key: 'id'
        },
        {
          width:"auto",
          title: '商品',
          key: 'goods_name'
        },
      {
          width:"auto",
          title: '规格',
          key: 'sku_name'
        },
        {
          width:"80",
          title: '数量',
          key: 'num'
        },{
          width:"80",
          title: '价格',
          key: 'price'
        },{
          width:"80",
          title: '物流状态',
          key: 'express_name'
        },{
          width:"120",
          title: '物流公司',
          key: 'express_company'
        },{
          width:"200",
          title: '物流单号',
          key: 'express_no'
        }
      ],
  goods_columns2:[
        {
          width:"60",
          title: 'ID',
          key: 'id'
        },
        {
          width:"auto",
          title: '商品',
          key: 'goods_name'
        },
      {
          width:"auto",
          title: '规格',
          key: 'sku_name'
        },
        {
          width:"80",
          title: '数量',
          key: 'num'
        },{
          width:"80",
          title: '价格',
          key: 'price'
        },{
          width:"auto",
          title: '加料',
          key: 'attr_name'
        }
      ]
})

async function get_data(id) {
  let ret =await api.getOrdersListById({data_id:id})
  data.row = ret.data
  handleEdit(data.row)
}
function on_list(){
  tagsStore.removeTag(route.fullPath)
  if(data.row.type===1){
    router.push("/orders/orders_manage/dd_list")
  }else{
    router.push("/orders/orders_manage/list")
  }

}

onMounted(() => {
   api.getgoodsTypeArray().then((res) => (data.goodsType = res.data))
  const id = route.query.id
  modalVisible.value = true
  if(id>0){
    get_data(id)
  }else{
    handleAdd()
  }
  $table.value?.handleSearch()
})

async function handle_pass(status) {
  let post_data = {
    order_id:data.row.id,
    order_status:status
  }
  await api.updateOrdersRefund(post_data)
}
</script>

<template >
  <!-- 业务页面 -->
  <CommonPage show-footer title="订单详情" >
    <template #action>
      <div>
        <n-button class="float-right mr-15" type="primary" mt-20  @click="on_list">返回列表</n-button>
<!--        <n-popconfirm @positive-click="handle_pass(2)">-->
<!--          <template #trigger>-->
<!--            <n-button class="float-right mr-15" type="error">-->
<!--              <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />退款订单-->
<!--            </n-button>-->
<!--          </template>-->
<!--          确定要退款订单吗？所有退款将直接原路返回-->
<!--        </n-popconfirm>-->


<!--        <NButton class="float-right mr-15" type="error" @click="">-->
<!--          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />取消订单-->
<!--        </NButton>-->

<!--        <NButton class="float-right mr-15" type="primary" @click="">-->
<!--          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />线下收款-->
<!--        </NButton>-->

      </div>
    </template>
    <NForm
      ref="modalFormRef"
      label-placement="left"
      label-align="left"
      :label-width="80"
      :model="modalForm"
    >
      <n-card content-style="padding: 0;" >
        <n-tabs type="line" animated size="large" :tabs-padding="20" pane-style="padding: 20px;">
          <n-tab-pane name="基础信息" >

              <n-descriptions label-placement="left" bordered :column="4" style="width: 1000px;">
                <n-descriptions-item label="订单类型" :span="2">
                  <NTag type="primary" :bordered="false">{{data.goodsType[modalForm.type]}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="总金额" :span="2">
                  <NTag type="primary" :bordered="false">{{modalForm.price}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="付款方式">
                  <n-table :bordered="false" :single-line="false">
                    <tbody>
                      <tr v-for="(item,index) in modalForm.fkfs">
                        <td>{{item['fkfs']}}</td>
                        <td>{{item['price']}}</td>
                      </tr>
                    </tbody>
                  </n-table>
                </n-descriptions-item>
                <n-descriptions-item label="收银金额">
                  <NTag type="primary" :bordered="false">￥{{modalForm.fk_price}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="订单金额">
                  <NTag type="primary" :bordered="false">￥{{modalForm.price}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="订单编号" :span="2">
                  <NTag type="primary" :bordered="false">{{modalForm.id}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="流水号" :span="2">
                  <NTag type="primary" :bordered="false">{{modalForm.water_no}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="收银员工">
                  <NTag type="primary" :bordered="false">{{modalForm.pay_designer_name}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="下单人姓名">
                  <NTag type="primary" :bordered="false">{{modalForm.user_name}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="下单人卡号">
                  <NTag type="primary" :bordered="false">{{modalForm.user_card_no}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="下单人类型">
                  <NTag type="primary" :bordered="false">{{modalForm.user_type}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="下单人电话">
                  <NTag type="primary" :bordered="false">{{modalForm.user_phone}}</NTag>
                </n-descriptions-item>

                <n-descriptions-item label="运费">
                  <NTag type="primary" :bordered="false">￥{{modalForm.express_price}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="优惠金额">
                  <NTag type="primary" :bordered="false">￥{{modalForm.sale_price}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="订单状态">
                  <NTag type="primary" :bordered="false">{{modalForm.status_name}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="优惠规则" :span="4" v-if="modalForm.type!==3">
                  <NTag type="primary" :bordered="false">{{modalForm.sale_roles}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="下单时间" :span="2">
                  <NTag type="primary" :bordered="false">{{modalForm.created_at}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="付款时间" :span="2">
                  <NTag type="primary" :bordered="false">{{modalForm.pay_time}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="收件人" :span="2" v-if="modalForm.type===2">
                  <NTag type="primary" :bordered="false">{{modalForm.receive_name}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="电话" :span="2" v-if="modalForm.type===2">
                  <NTag type="primary" :bordered="false">{{modalForm.receive_phone}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="收件地址" :span="2" v-if="modalForm.type===2">
                  <NTag type="primary" :bordered="false">{{modalForm.receive_address}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="发货状态" :span="2" v-if="modalForm.type===2">
                  <NTag type="primary" :bordered="false">{{modalForm.express_name}}</NTag>
                </n-descriptions-item>
                <n-descriptions-item label="订单备注" :span="4">
                  <NTag type="primary" :bordered="false">{{modalForm.remark}}</NTag>
                </n-descriptions-item>

              </n-descriptions>

          </n-tab-pane>
          <n-tab-pane name="货物详情" >
              <n-data-table
                :columns="modalForm.type===2?data.goods_columns:data.goods_columns2"
                :data="modalForm.goods"
                style="width: 1000px;"
                striped
              />
          </n-tab-pane>

        </n-tabs>
      </n-card>


    </NForm>
  </CommonPage>
</template>
